<template>
<div>
  <el-row>
    <h1>工作情况总览</h1>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card>
        <div slot="header" class="clearfix">
          <!-- <span class="el-icon-tableware"></span> -->
          <span>各岗位的整体任务完成情况</span>
        </div>
        <div class="chartCard">
          <v-chart :options="task_each_post" :autoresize="true"/>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card>
        <div slot="header" class="clearfix">
          <!-- <span class="el-icon-s-unfold"></span> -->
          <span>近七天内任务完成情况</span>
        </div>
        <div class="chartCard">
          <v-chart :options="task_past_days" :autoresize="true"/>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card>
        <div slot="header" class="clearfix">
          <!-- <span class="el-icon-s-unfold"></span> -->
          <span>工人完成任务量</span>
        </div>
        <div class="chartCard">
          <v-chart :options="worker_complet"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
import ECharts from "vue-echarts";
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line'
export default {
    components:{
        "v-chart": ECharts
    },
  data(){
    return{
      task_each_post:{},//各岗位的整体任务完成情况
      task_each_post_Xdata:['岗位1', '岗位2', '岗位3', '岗位4', '岗位5', '岗位6'],//横坐标
      task_each_post_datas:[12,23,55,65,90,80],//数据
      task_past_days:{},//近七天内任务完成情况
      task_past_days_Xdata:["周一","周二","周三","周四","周五","周六","周日"],//横坐标
      task_past_days_datas:[64,53,62,55,78,85,52,64],//数据
      worker_complet:{},//工人完成任务占比
      worker_complet_Xdata:["工人1","工人2","工人3","工人1","工人1","工人1","工人1","工人1","工人1","工人1",],//横坐标
      worker_complet_datas:[12,15,17,27,28,58,60,61,62,67],//数据

    }
  },
  methods: {
    
  },
  mounted(){
    this.task_each_post = {
      xAxis: {
          data: this.task_each_post_Xdata,
          axisLabel: {
              textStyle: {
                  color: '#999'
              }
          },
          axisTick: {
              show: false
          },
          axisLine: {
              show: false
          },
          z: 10
      },
      yAxis: {
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          axisLabel: {
              textStyle: {
                  color: '#999'
              }
          }
      },
      grid: {
        left: '6%',
        right: '7%',
        bottom: '5%',
        top:'10%',
        containLabel: true
      },
      dataZoom: [
          {
              type: 'inside'
          }
      ],
      series: [
          {
              type: 'bar',
              itemStyle: {
                  color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#83bff6' // 0%处的颜色
                        },{
                            offset: 1,
                            color: '#188df0' // 100%处的颜色
                        }]
                    }
              },
              emphasis: {
                itemStyle: {
                  color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#2378f7' // 0%处的颜色为红色
                        },{
                            offset: 0.7,
                            color: '#2378f7' // 50%处的颜色为红色
                        }, {
                            offset: 1,
                            color: '#2378f7' // 100%处的颜色为蓝
                        }]
                    }
                }
            },
              data: this.task_each_post_datas
          }
      ],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
    }
    },
    this.task_past_days = {
      
      xAxis: {
          data: this.task_past_days_Xdata,
          axisLabel: {
              textStyle: {
                  color: '34, 50, 62'
              }
          },
          axisTick: {
              show: false
          },
          axisLine: {
              show: false
          },
          z: 10
      },
      yAxis: {
          type: 'value',
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          axisLabel: {
              textStyle: {
                  color: '#999'
              }
          }
      },
      grid: {
        left: '6%',
        right: '7%',
        bottom: '5%',
        top:'10%',
        containLabel: true
      },
        series: [{
            data: this.task_past_days_datas,
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#83bff6' // 0%处的颜色
                        },{
                            offset: 1,
                            color: '#188df0' // 100%处的颜色
                        }]
                    }
            },
        }]
    },
    this.worker_complet={
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
      },
      grid: {
        left: '6%',
        right: '7%',
        bottom: '5%',
        top:'10%',
        containLabel: true
      },
      xAxis: {
          type: 'value',
          axisLabel: {
              textStyle: {
                  color: '34, 50, 62'
              }
          },
          axisLine: {
                show: false
            },
          axisTick: {
              show: false
          },
      },
      yAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                  color: '#999'
              }
          },
          axisTick: {
              show: false
          },
          data:this.worker_complet_Xdata
      },
      series: [
          {
              name: '完成工作量',
              type: 'bar',
              itemStyle: {
                    emphasis: {
                        barBorderRadius: 7
                    },
                    normal: {
                        barBorderRadius: 7,
                        color: {
                            type: 'linear', // 线性渐变
                            colorStops: [{
                                offset: 0,
                                color: '#3977E6' // 0%处的颜色
                            },{
                                offset: 1,
                                color: '#37BBF8' // 100%处的颜色
                            }]
                        }
                    }
                },
              data:this.worker_complet_datas,
          }
      ]
    }
  }

}
</script>

<style scoped>
.echarts{
  width: 100%;
  height:100%;
}
.chartCard{
  width:100%;
  height: 300px;
}
.clearfix >>> span{
  font-family: "微软雅黑";
  font-size:"20px";
  color: #606266;
  
}

</style>
